Proxy 是 ES6 新增的方法,用 Proxy 將物件包裝起來後,往後在操作此物件時都必須經過 Proxy,因此可以理解成攔截或是代理。
Proxy
基本語法為:
let proxy = new Proxy(target, handler)
當中的 target、handler 代表:
target
:要被代理的物件。handler
:代理過後要做的行為,包含 construct、get、set 等等。以下是簡易範例:
let dog = {
name: '來福',
age: 6
}
dog = new Proxy(dog, {
get(target, prop, receiver){
// ...
},
set(target, prop, value, receiver){
// ...
}
})
handler
中除了 get、set 外還包含了 ownKeys
、getOwnPropertyDescriptor
、deleteProperty
、isExtensible
、apply
等方法,不過這篇文章只先筆記 get & set 兩種。
get
是取得屬性時會觸發的方法,從上面的範例中可以看到 get 帶了三個參數,分別是:
target
:目標對象。prop
:目標屬性。receiver
:Proxy
本身。實際將這些參數 log 出來:
get(target, prop, receiver){
console.log(`target: ${target}`)
console.log(`prop: ${prop}`)
console.log(receiver)
}
// 觸發 get
dog['name']
既然知道三者代表的意思,我們可以設定某個值、或是某條件、私有變數禁止存取等。
get(target, prop, receiver){
if(prop === 'name'){
return "您無存取權限"
}
},
set
在設定屬性時觸發,參數有四個:
set(target, prop, value, receiver){
// ...
}
分別代表:
target
:目標對象。prop
:目標屬性。prop
:目標屬性的值。receiver
:Proxy
本身。用法和 get 類似,不過在結束時要 return 一個布林代表成功及失敗,避免發生 TypeError。
dog = new Proxy(dog, {
set(target, prop, value, receiver){
target[prop] = value
return true
}
})
dog['nickName'] = '小笨狗'
一旦使用了 proxy
代理 target
,target
的 this 就會指向 proxy
。
const obj = {
get: function () {
console.log(this === proxy)
}
}
const proxy = new Proxy(obj, {})
obj.get() // false
proxy.get() // true